<template>
  <div>
    <el-dialog title="工序汇报单详情"  width="1100px" @open="open" class="icon-dialog" :visible.sync="show" :before-close="closeForm" append-to-body>
      <div>
        <el-button type="primary" size="small" icon="el-icon-check" @click="updateOptrpt()">修改</el-button>
      </div>
      <el-form ref="form" :model=" sfcOptrptform " size="small" label-width="80px" :inline="true" class="header">
        <el-row>
          <el-col :span="10">
            <el-form-item label="单据编号:" class="no-wrap-label">{{ sfcOptrptform.billNo }}</el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="生产订单编号:" class="no-wrap-label" label-width="130px">{{ sfcOptrptform.prdBillNo }}</el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="单据日期:" class="no-wrap-label">{{ sfcOptrptform.date }}</el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="汇报人:" class="no-wrap-label">{{ sfcOptrptform.prtUser }}</el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="车间名称:" class="no-wrap-label">{{ sfcOptrptform.workShopName }}</el-form-item>
          </el-col>
        </el-row>

        <br />
      </el-form>

      <el-table :data="saleoptrptdetailList" height="calc(100vh - 300px)">
        <!--        <el-table-column label="No." width="60" align="right" type="index"></el-table-column>-->
<!--        <el-table-column label="工序汇报单据编号" width="120" prop="billNo"></el-table-column>-->
        <el-table-column label="物料编码" width="120" prop="materialNo"></el-table-column>
        <el-table-column label="物料名称" width="120" prop="materialName"></el-table-column>
        <el-table-column label="规格型号" width="120" prop="specification"></el-table-column>
<!--        <el-table-column label="单位名称" width="120" prop="unitName"></el-table-column>-->
<!--        <el-table-column label="单位编码" width="120" prop="unitNo"></el-table-column>-->
        <el-table-column label="操作工" width="120" prop="operator"></el-table-column>
        <el-table-column label="工序号" width="120" prop="operpNo"></el-table-column>
        <el-table-column label="工序说明" width="120" prop="describtion"></el-table-column>
        <el-table-column label="批号" width="80" prop="quaQty">
          <template slot-scope="scope">
            <el-input
                v-model="scope.row.flot"
                size="mini"
                placeholder="批号"

            />
          </template>
        </el-table-column>

        <el-table-column label="合格数量" width="120" prop="quaQty">
          <template slot-scope="scope">
            <el-input
                v-model="scope.row.quaQty"
                size="mini"
                placeholder="请输入合格数量"
                @input="handleRealQtyInput(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="工废数量" width="120" prop="processFailQty">
          <template slot-scope="scope">
            <el-input
                v-model="scope.row.processFailQty"
                size="mini"
                placeholder="请输入工废数量"
                @input="handlProcessQtyInput(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="料废数量" width="120" prop="materialFailQty">
          <template slot-scope="scope">
            <el-input
                v-model="scope.row.materialFailQty"
                size="mini"
                placeholder="请输入工废数量"
                @input="handleMaterialFailQtyInput(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="完工数量" width="120" prop="endQty"></el-table-column>
        <el-table-column label="工时" width="120" prop="workTime"></el-table-column>


      </el-table>


    </el-dialog>

  </div>
</template>
<script>
import { detail,updateOprptDetail  } from '@/api/app/sfcoptrpt'
export default {
	name:'sfcOptrptdetail',
	props: {
		show: {
			type: Boolean,
			default: true
		},
		size: {
			type: String,
			default: 'mini'
		},
		info: {
			type: Object,
		},
	},
	data() {
		return {
      sfcOptrptform:{},
      saleoptrptdetailList:[]
		}
	},
	watch:{
		show(val){
			if(val){
			}
		}
	},
	methods: {
    //修改汇报详情
    updateOptrpt(){

      this.$confirm('是否确认修改', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '正在修改'
        });
        updateOprptDetail({billNo : this.sfcOptrptform.billNo,detail : this.saleoptrptdetailList}).then(res =>{
          if (res.data){
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.$emit('refresh_list'); // ✅ 通知父组件刷新
            this.closeForm()
          }
        })
      })
    },
    handleMaterialFailQtyInput(row) {

      let val = row.materialFailQty.toString();
      // 只保留数字和最多两位小数
      val = val.replace(/[^\d.]/g, '')             // 去除非数字和点
          .replace(/^0+(\d)/, '$1')           // 去除多余前导零
          .replace(/^\./, '0.')               // 以点开头补零
          .replace(/\.{2,}/g, '.')            // 多个点合并为一个
          .replace('.', '#')                  // 临时替换第一个点
          .replace(/\./g, '')                 // 移除其他点
          .replace('#', '.')                  // 恢复第一个点
          .replace(/^(\d+)(\.\d{0,2}).*$/, '$1$2'); // 限制两位小数


      row.materialFailQty = val;
      this.handleEndQty(row)
    },
    handleRealQtyInput(row) {

      let val = row.processFailQty.toString();
      // 只保留数字和最多两位小数
      val = val.replace(/[^\d.]/g, '')             // 去除非数字和点
          .replace(/^0+(\d)/, '$1')           // 去除多余前导零
          .replace(/^\./, '0.')               // 以点开头补零
          .replace(/\.{2,}/g, '.')            // 多个点合并为一个
          .replace('.', '#')                  // 临时替换第一个点
          .replace(/\./g, '')                 // 移除其他点
          .replace('#', '.')                  // 恢复第一个点
          .replace(/^(\d+)(\.\d{0,2}).*$/, '$1$2'); // 限制两位小数


      row.processFailQty = val;
      this.handleEndQty(row)
    },
    handlProcessQtyInput(row) {

      let val = row.quaQty.toString();
      // 只保留数字和最多两位小数
      val = val.replace(/[^\d.]/g, '')             // 去除非数字和点
          .replace(/^0+(\d)/, '$1')           // 去除多余前导零
          .replace(/^\./, '0.')               // 以点开头补零
          .replace(/\.{2,}/g, '.')            // 多个点合并为一个
          .replace('.', '#')                  // 临时替换第一个点
          .replace(/\./g, '')                 // 移除其他点
          .replace('#', '.')                  // 恢复第一个点
          .replace(/^(\d+)(\.\d{0,2}).*$/, '$1$2'); // 限制两位小数

      let num = parseFloat(val);
      let max = parseFloat(row.mustQty || 0);

      row.quaQty = val;
      this.handleEndQty(row)
    },
    handleEndQty(row){
      row.endQty = Number(row.quaQty) + Number(row.processFailQty) + Number(row.materialFailQty)
    },
    open(){

      detail(this.info).then(res => {

        if (res.status == 200) {
          this.sfcOptrptform = res.data.data;
          this.saleoptrptdetailList = res.data.dataList;
          console.log('receList',this.receList)

        } else {
          this.$message.error('获取详情失败2，请稍后再试');
        }
      }).catch(error => {

        this.$message.error('获取详情失败，请稍后再试');
      });
		},
		closeForm(){
			this.$emit('update:show', false)
		}
	}
}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>
